<template>
	<div class="reflux-config">
		<div class="top-search">
			<div class="tools">
				<global-input-search v-model:value="tableAttr.searchObj.configName" placeholder="配置名称" @search="setTableData" />
				<a-select
					ref="select"
					v-model:value="tableAttr.searchObj.status"
					class="type-select"
					placeholder="状态"
					style="width: 216px; margin-left: 8px"
					allow-clear
					@change="(type: any) => changetType(type)"
				>
					<a-select-option :key="item.value" v-for="item in configStatus" :value="item.value">{{ item.label }}</a-select-option>
				</a-select>
			</div>
			<a-button v-if="g6Permission.showBtn('add-reflux-config')" type="primary" @click="PageButtonClick('add')"> 新增 </a-button>
		</div>
		<div class="content">
			<GlobalTable :data-source="tableAttr.data" :loading="tableAttr.loading" :columns="columns" :show-operation="true" :use-select="false">
				<template #operation="{ record }">
					<div class="operations">
						<div
							v-if="g6Permission.showBtn('forbidden-reflux-config')"
							class="font-14 operation-item-btn"
							@click="PageButtonClick('forbidden', record)"
						>
							<span v-if="record.status === 1">禁用</span>
							<span v-else>启用</span>
						</div>

						<div
							v-if="g6Permission.showBtn('update-reflux-config')"
							class="font-14 operation-item-btn"
							@click="PageButtonClick('edit', record)"
						>
							编辑
						</div>

						<div
							v-if="g6Permission.showBtn('delete-reflux-config')"
							class="font-14 operation-item-btn"
							@click="PageButtonClick('delete', record)"
						>
							删除
						</div>
					</div>
				</template>
				<template #device="{ record }">
					<a-tooltip placement="topLeft">
						<template #title>{{ record.device?.deviceNameStr || '' }}</template>
						<p class="font-14 tooltip-default-text">{{ record.device?.deviceNameStr || '' }}</p>
					</a-tooltip>
				</template>
				<template #status="{ record }">
					<div>{{ filterStatus(record.status) }}</div>
				</template>
			</GlobalTable>

			<GlobalPagination
				:current="tableAttr.current"
				:page-size="tableAttr.pageSize"
				:total="tableAttr.total"
				@change="setTablePagination"
			/>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { g6Permission, g6StorageValue } from 'glasssix-utils-ts';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { DataRefluxApi } from '../../api';
import { useDeleteModal } from '@/global-hooks/base.hooks';
const { setOpenDeleteModal } = useDeleteModal();

const router = useRouter();
const $message: any = inject('$message');

const { tableAttr, setTableData, setTablePagination } = g6UseTable(DataRefluxApi.configList);

const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'configName', title: '配置名称', width: 214, ellipsis: true },
	{ dataIndex: 'device', title: '回流设备 ', custom: true, ellipsis: true },
	{ dataIndex: 'status', title: '状态', width: 108, custom: true, ellipsis: true },
	{ dataIndex: 'updatedTime', title: '修改时间', width: 386, ellipsis: true }
];
const configStatus = ref([
	{ label: '启用', value: 1 },
	{ label: '禁用', value: 0 }
]);

const filterStatus = (value: any) => {
	return configStatus.value.filter((item) => item.value === value)[0]?.label || '';
};

const changetType = (obj: number) => {
	setTableData(true);
	g6StorageValue.save('session', 'versionsType', obj);
	if (obj === undefined || obj === null) {
		g6StorageValue.delete('session', 'versionsType');
	}
};

const PageButtonClick = async (type: string, record: Record<string, any> = {}) => {
	console.log(type, record);
	if (type === 'add') {
		router.push('/config-manage/reflux-config/add');
		return;
	}
	if (type === 'edit') {
		router.push(`/config-manage/reflux-config/update?id=${record.id}`);
		return;
	}
	if (type === 'delete') {
		const deleteFun = async (): Promise<void> => {
			let res: TsRes = await DataRefluxApi.deleteConfig([record.id]);
			if (res.code === 0) {
				tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
				tableAttr.total = tableAttr.total - 1;
				$message.success('删除成功');
				setTableData();
			}
		};
		const deleteModalInfo = { title: '确认删除该配置？ ', okText: '删除', cancelText: '取消' };
		setOpenDeleteModal(deleteFun, deleteModalInfo);
		return;
	}

	if (type === 'forbidden') {
		tableAttr.loading = true;
		let params = {
			status: record.status === 0 ? 1 : 0
		};
		const mergeParams = Object.assign({}, record, params);
		console.log('参数', mergeParams);
		const res: TsRes = await DataRefluxApi.saveConfig(mergeParams);
		tableAttr.loading = false;
		if (res.code === 0) {
			$message.success(`${mergeParams.status === 0 ? '禁用' : '启用'}成功`);
			setTableData(true);
		}
		return;
	}
};

// const sort = (val: any): void => {
// 	console.log('排序：', val);
// 	tableAttr.searchObj.timeSort = val.order;
// 	setTableData(true);
// };

onMounted(() => {
	setTableData(true);
});

// 排序
</script>

<style lang="less" scoped>
.reflux-config {
	padding: 0 32px;
	color: @text01;

	.top-search {
		display: flex;
		justify-content: space-between;
	}

	.content {
		padding: 20px 0 0;
	}
}
</style>
